import { Button, Icon } from 'antd';
import { LayerLink } from 'comps/common';
import BuildLog from '../containers/build-log';
import UnitConfig from '../containers/unit-config';
import UnitDeploy from '../containers/unit-deploy';
import UnitMachines from '../containers/unit-machines';
import moment from 'moment';
import _ from 'lodash';
import * as React from 'react';

const ButtonGroup = Button.Group;

class UnitOperator extends React.Component {
  render() {
    const { unit, onNewBuild, onCancelBuild } = this.props;
    const { id: unitId, lastBuild: build } = unit;
    const canPackage = unit.type !== 'DOCKER_IMAGE';
    const canDeploy = unit.type !== 'MAVEN_PARENT';
    const isBuilding = !_.isEmpty(build) && build.status === 'BUILDING';

    let buildInfo = undefined;
    if (!_.isEmpty(build)) {
      switch (build.status) {
        case 'BUILDING':
          buildInfo = (
            <div className='build-info'>
              <Icon type='play-circle' className='color-primary'/>
              <div className='build-info-meta'>
                正在进行的打包动作
                [<LayerLink title={`打包日志 (${build.uuid})`} component={BuildLog} data={{ uuid: build.uuid }}>查看日志</LayerLink>]
                [<a onClick={() => onCancelBuild(build.uuid)}>取消</a>]
                <br/>
                {`${build.uuid} @ ${moment(build.createdAt)
                  .format('YYYY-MM-DD HH:mm:ss')}`}
              </div>
            </div>
          );
          break;
        case 'FAILED':
          buildInfo = (
            <div className='build-info'>
              <Icon type='exclamation-circle-o' className='color-danger'/>
              <div className='build-info-meta'>
                上一个打包动作失败了 [<LayerLink title={`打包日志 (${build.uuid})`} component={BuildLog} data={{ uuid: build.uuid }}>查看日志</LayerLink>]<br/>
                {`${build.uuid} @ ${moment(build.updatedAt)
                  .format('YYYY-MM-DD HH:mm:ss')}`}
              </div>
            </div>
          );
          break;
        case 'CANCEL':
          buildInfo = (
            <div className='build-info'>
              <Icon type='cross-circle-o' className='color-danger'/>
              <div className='build-info-meta'>
                上一个打包动作被取消 [<LayerLink title={`打包日志 (${build.uuid})`} component={BuildLog} data={{ uuid: build.uuid }}>查看日志</LayerLink>]<br/>
                {`${build.uuid} @ ${moment(build.updatedAt)
                  .format('YYYY-MM-DD HH:mm:ss')}`}
              </div>
            </div>
          );
          break;
        case 'SUCCESS':
          buildInfo = (
            <div className='build-info'>
              <Icon type='check-circle-o' className='color-success'/>
              <div className='build-info-meta'>
                上一个打包动作成功了<br/>
                {`${build.uuid} @ ${moment(build.updatedAt)
                  .format('YYYY-MM-DD HH:mm:ss')}`}<br/>
                Image：{_.isEmpty(build.image) ? '无' : build.image}
              </div>
            </div>
          );
          break;
        default:
      }
    }

    const configButton = <LayerLink title='运行单元配置' className='ant-btn ant-btn-sm' component={UnitConfig} data={{ unitId }}><Icon type='setting'/> 配置</LayerLink>;
    const deployButton = <LayerLink title='运行单元部署' className='ant-btn ant-btn-sm' component={UnitDeploy} data={{ unitId }}><Icon type='caret-right'/> 部署</LayerLink>;

    return (
      <div className='unit-operator'>
        {canDeploy
          ? <UnitMachines unit={unit}/>
          : undefined
        }
        <div className='unit-controls'>
          {configButton}
          <ButtonGroup>
            {canPackage
              ? <Button type='primary' size='small' loading={isBuilding} onClick={() => onNewBuild(unitId)}>打包</Button>
              : undefined
            }
            {canDeploy ? deployButton : undefined}
          </ButtonGroup>
        </div>
        {buildInfo}
      </div>
    );
  }
}

export default UnitOperator;
